import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import routes from "./router";
/*
  BrowserRouter 
    所有路由必须作为BrowserRouter的子组件才会有效果
    否则会报错
  Route 
    根据路由路径的变化来匹配path，匹配上就加载component
    没有匹配上就会卸载
  Switch
    只会加载显示其中一个路由组件
  Redirect
    重定向
  Link  路由链接：用来跳转路由路径
  NavLink 路由链接：用来跳转路由路径
*/

function App() {
  return (
    <Router>
      <Switch>
        {
          // 遍历路由配置项，生成Route组件
          routes.map((route) => {
            // return <Route
            //   path={route.path}
            //   component={route.component}
            //   key={route.path}
            // />
            /*
              简写
              route --> { path: 'xx', component: xxx }
              {...route}
                --> {} jsx语法，里面使用js语法
                --> ...route 
                  将route对象上所有属性展开到Route组件上
                  作为Route组件的属性
            */

            return <Route {...route} key={route.path} exact />;
          })
        }
      </Switch>
    </Router>
  );
}

export default App;
